<template>
  <div id="f-scroll"
       :ref="'scroll'+ id"
       @scroll="scrolling"
       :style="scrollStyle">
    <slot></slot>
  </div>
</template>

<script>
export default {
  props: {
    scrollStyle: {
      type: Object,
      default: {
        "overflow-x": "hidden",
        "overflow-y": "auto"
      }
    },
    id: {
      type: Number,
      default: 666
    },
    throttle: {
      type: Number,
      default: 600
    }
  },
  data() {
    return {
      scroll: "",
      lock: true
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.scroll = this.$refs["scroll" + this.id];
    });
  },
  methods: {
    scrolling() {
      if (
        this.scroll.scrollHeight -
          this.scroll.clientHeight -
          this.scroll.scrollTop <
        200
      ) {
        if (this.lock) {
          this.$emit("scrollToEnd");
          this.lock = false;
          setTimeout(() => {
            this.lock = true;
          }, this.throttle);
        }
      }
    }
  }
};
</script>

<style>
#f-scroll {
  overflow: auto;
}
::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}
::-webkit-scrollbar-button {
  background-color: #b3b3b3;
  width: 0;
  height: 0;
}
::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  background: #ecf3f5;
}
::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  height: 154px;
  /* -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); */
  background: #535353;
}
</style>
